My browser's navigator.language is en-US, system (macos) primary language is English (United States). When I do new Date().toLocaleDateString() in chrome console I got 10/27/2021 which is as expected. The weird thing is for a simple HTML <input type="date" value="2021-10-27" /> It shows up in my Chrome as 27/10/2021. I've searched up and down and couldn't figure out what caused Chrome to format date input this way. Any ideas?
For comparison, in safari (navigator.language = "en-us") on the same computer, it shows up as 10/27/2021 as expected.
For quick reproduction, here's a code sandbox link which you can view in chrome & safari: https://codesandbox.io/s/youthful-moon-oiryd?file=/index.html:119-159
<input type="date" value="2021-10-27">
Turned out it was because my macOS had its region set to Singapore, despite primary language set to English (US). After I updated the Region to be United States the date in the input changed to mm/dd/yyyy. I suppose this means Chrome picks up the system region for locale and it takes priority over the language settings. Funny that Chrome only does this for date input formatting but not for its implementation of toLocaleDateString – perhaps two different teams for DOM vs javascript implementation. Anyway, leaving this here in case it may help someone else.